<template>
	<view class="work-time-container">
		<uv-form
			labelPosition="top"
			labelWidth="90px"
			errorType="toast"
			ref="form"
			:labelStyle="{ fontSize: '30rpx', color: '#767a82' }"
			:rules="rules"
			:model="company"
		>
			<uv-form-item label="上班时间" borderBottom required prop="startTime">
				<picker
					mode="time"
					@change="e => { company.startTime = e.detail.value }"
				>
					<uv-input v-model="company.startTime" disabled placeholder="请选择开始时间"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="下班时间" borderBottom required prop="endTime">
				<picker
					mode="time"
					@change="e => { company.endTime = e.detail.value }"
				>
					<uv-input v-model="company.endTime" disabled placeholder="请选择结束时间"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="休息时间" borderBottom required prop="weekend">
				<picker
					:range="weekendArray"
					@change="e => { company.weekend = weekendArray[e.target.value] }"
				>
					<uv-input v-model="company.weekend" disabled placeholder="请选择休息时间"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
			<uv-form-item label="加班情况" borderBottom required prop="workOvertime">
				<picker
					:range="overTimeArray"
					@change="e => { company.workOvertime = overTimeArray[e.target.value] }"
				>
					<uv-input v-model="company.workOvertime" disabled placeholder="请选择加班情况"></uv-input>
				</picker>
				<template v-slot:right>
					<uv-icon name="arrow-right"></uv-icon>
				</template>
			</uv-form-item>
		</uv-form>

		<view class="confirm bottom"><view class="button" @click="handleSubmit">保存</view></view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
import { updateCompanyWorkTime } from '@/apis/company/index.js';

export default {
	data() {
		return {
			weekendArray: ['双休', '单休', '大小周', '轮班排班'],
			overTimeArray: ['不加班', '偶尔加班', '经常加班'],
			company: {
				startTime: '',
				endTime: '',
				weekend: '',
				workOvertime: ''
			},
			rules: {
				startTime: { required: true, trigger: 'chang', message: '请选择上班时间' },
				endTime: { required: true, trigger: 'chang', message: '请选择下班时间' },
				weekend: { required: true, trigger: 'chang', message: '请选择休息时间' },
				workOvertime: { required: true, trigger: 'chang', message: '请选择加班情况' }
			}
		};
	},
	computed: {
		...mapState(['userInfo'])
	},
	mounted() {
		const { weekend, workOvertime, workTime } = uni.getStorageSync('company');
		if (workTime) {
			this.company = {
				weekend,
				workOvertime,
				startTime: workTime.split('-')[0],
				endTime: workTime.split('-')[1]
			};
		}
	},
	methods: {
		handleSubmit() {
			this.$refs['form']
				.validate()
				.then(async () => {
					const { weekend, workOvertime, endTime, startTime } = this.company;
					const form = { weekend, workOvertime, workTime: `${startTime}-${endTime}` };

					updateCompanyWorkTime(this.userInfo.companyId, form).then(res => {
						if (res.code === 200) {
							uni.showToast({ icon: 'success', title: '保存成功' });
							const time = setTimeout(() => {
								clearTimeout(time);
								uni.navigateBack();
							}, 1000);
						}
					});
				})
				.catch(error => {
					return false;
				});
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #fff;
}
</style>

<style lang="scss" scoped>
.work-time-container {
	padding: 30rpx;
	::v-deep .uv-input__content__prefix-icon {
		margin-right: 0;
	}
}
</style>
